<template>
  <div>
    <live2d-v3
      class="live2d"
      v-show="showLive2d"
      ref="live2d"
      @live2dItemEnter="live2dItemEnter"
      @live2dItemClick="live2dItemClick"
      :className="className"
      ModelWidth="230px"
      ModelHeight="230px"
      TipWidth="180px"
      positionLeft="1%"
    ></live2d-v3>
    <!-- <div class="Tip" v-show="!showLive2d" @click="toshowLive2d">
      <i class="live2d">点击唤醒人物</i>
    </div>-->
  </div>
</template>

<script>
import Bus from "../../bus";
export default {
  data() {
    return {
      className: [
        "live2dicon iconfont iconshouye",
        "live2dicon iconfont iconyifu",
        "live2dicon iconfont iconicon-test",
        "live2dicon iconfont icongithub",
        "live2dicon iconfont iconcuowu",
      ],
      showLive2d: true,
    };
  },
  mounted() {
    if (!this.$refs.live2d.showMessage) {
      return;
    }
    Bus.$on("BlogTitleTipAboutLive2d", (msg) => {
      this.$refs.live2d.showMessage("你要看看" + msg + "吗?", 2000, 10000);
    });
    Bus.$on("live2dAboutGetMessage", (msg) => {
      this.$refs.live2d.showMessage("你有一条消息说:" + msg, 2000, 10000);
    });
    Bus.$on("live2dAboutGetAdvice", (msg) => {
      this.$refs.live2d.showMessage(
        "你的任何留言或者建议都能带给本站更好的体验",
        2000,
        10000
      );
    }),
      Bus.$on("live2dAboutSendError", (msg) => {
        this.$refs.live2d.showMessage(
          "失败了。。。如果持续出现此情况请联系我鸭",
          2000,
          10000
        );
      }),
      Bus.$on("live2dAboutChooseWay", (msg) => {
        this.$refs.live2d.showMessage("选择" + msg + "类型的博客么?", 2000, 10000);
      });
    Bus.$on("live2dAboutVideo", (msg) => {
      this.$refs.live2d.showMessage(
        "看看" + msg.Way + "《" + msg.title + "》么?",
        2000,
        10000
      );
    });
    Bus.$on("live2dAboutNavigation", (msg) => {
      this.$refs.live2d.showMessage(msg.title, 2000, 10000);
    });
  },
  methods: {
    toshowLive2d() {
      this.showLive2d = true;
    },
    live2dItemClick(index) {
      if (index === 4) {
        this.showLive2d = false;
      }
      if (index === 3) {
        window.open("https://gitee.com/xiao_tigers", "_blank");
      }
      if (index === 2) {
        this.$refs.live2d.loadOtherModel();
      }
      if (index === 1) {
        this.$refs.live2d.loadRandModel();
      }
      if (index === 0) {
        if (this.$route.path !== "/index") {
          this.$router.push("/index");
        }
      }
    },

    live2dItemEnter(index) {
      if (index === 4) {
        this.$refs.live2d.showMessage &&
          this.$refs.live2d.showMessage("要我离开吗", 2000, 1000);
      }
      if (index === 3) {
        this.$refs.live2d.showMessage &&
          this.$refs.live2d.showMessage("github欢迎您", 2000, 1000);
      }
      if (index === 2) {
        this.$refs.live2d.showMessage &&
          this.$refs.live2d.showMessage("还有其他角色哟", 2000, 1000);
      }
      if (index === 1) {
        this.$refs.live2d.showMessage &&
          this.$refs.live2d.showMessage("想换一件衣服看看吗", 2000, 1000);
      }
      if (index === 0) {
        this.$refs.live2d.showMessage &&
          this.$refs.live2d.showMessage("回首页看看吧", 2000, 1000);
      }
    },
  },
  beforeDestroy() {
    Bus.$off("BlogTitleTipAboutLive2d");
    Bus.$off("live2dAboutGetMessage");
    Bus.$off("live2dAboutGetAdvice");
    Bus.$off("live2dAboutGetAdvice");
    Bus.$off("live2dAboutSendError");
    Bus.$off("live2dAboutChooseWay");
    Bus.$off("live2dAboutVideo");
  },
};
</script>

<style lang="scss" scoped>
.live2d-leave-active,
.live2d-enter-active {
  transition: opacity 0.5s;
}
.live2d-leave-to,
.live2d-enter {
  opacity: 0;
}
.live2d {
  position: absolute;
  z-index: 9999999;
  opacity: 0.9;
}
.Tip {
  padding: 10px 5px 5px;

  position: absolute;
  width: 50px;
  height: 100px;
  bottom: 20px;
  right: 40px;
  background: #e5e5e5;
  border-radius: 5px;
  animation: move 0.5s linear infinite;
}
@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(0);
  }
}
@font-face {
  font-family: "live2d";
  src: url("../../assets/font/1.woff");
  src: url("../../assets/font/1.woff") format("woff");
}
i {
  font-size: 25px;
  color: #000;
  font-family: "live2d";
}

span[data-v-5581a957] {
  .iconfont {
    color: red !important;
  }
}
</style>
